<template>
  <div class="skill-chart-panel">
    <div ref="chartDom" class="chart-area"></div>
    <div class="skill-details">
      <div class="skill-detail">
        <div class="color-indicator" :style="{ backgroundColor: 'rgb(7, 111, 255)' }"></div>
        <span class="skill-text">本科以下</span>
        <span class="skill-value">{{ belowPercent }}%</span>
        <span class="count">({{ belowCount }})</span>
      </div>
      <div class="skill-detail">
        <div class="color-indicator" :style="{ backgroundColor: 'rgb(0, 254, 244)' }"></div>
        <span class="skill-text">本科</span>
        <span class="skill-value">{{ bachPercent }}%</span>
        <span class="count">({{ bachCount }})</span>
      </div>
      <div class="skill-detail">
        <div class="color-indicator" :style="{ backgroundColor: 'rgb(255, 216, 123)' }"></div>
        <span class="skill-text">本科以上</span>
        <span class="skill-value">{{ abovePercent }}%</span>
        <span class="count">({{ aboveCount }})</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, shallowRef, computed } from 'vue';
import * as echarts from 'echarts/core';
import type { EChartsOption, PieSeriesOption } from 'echarts';
import variables from '../../variables.less?raw';

function getLessVariable(varName: string): string {
  const match = variables.match(new RegExp(`@${varName}:\\s*([^;]+);`));
  return match ? match[1].trim() : '#ccc';
}

const chartDom = ref<HTMLElement | null>(null);
const myChart = shallowRef<echarts.ECharts | null>(null);


const belowCount = ref(125);
const bachCount = ref(35);
const aboveCount = ref(68);


const totalSkills = computed(() => belowCount.value + bachCount.value + aboveCount.value);

const belowPercent = computed(() => totalSkills.value > 0 ? ((belowCount.value / totalSkills.value) * 100).toFixed(2) : '0.00');
const bachPercent = computed(() => totalSkills.value > 0 ? ((bachCount.value / totalSkills.value) * 100).toFixed(2) : '0.00');
const abovePercent = computed(() => totalSkills.value > 0 ? ((aboveCount.value / totalSkills.value) * 100).toFixed(2) : '0.00');

const skillData = computed(() => [
  { value: belowCount.value, name: '本科以下' },
  { value: bachCount.value, name: '本科' },
  { value: aboveCount.value, name: '本科以上' },
]);


const largestSkill = computed(() => skillData.value.reduce((max, item) => item.value > max.value ? item : max, skillData.value[0] || { value: 0, name: '' }));
const largestPercentage = computed(() => totalSkills.value > 0 ? ((largestSkill.value.value / totalSkills.value) * 100).toFixed(2) : '0.00');

const axisLineColor = getLessVariable('axis-line-color');

const panelBg = getLessVariable('bg-color-base');

const option = computed((): EChartsOption => ({
  tooltip: {
    trigger: 'item',
    formatter: '{b}: {c}人 ({d}%)',
    backgroundColor: 'rgba(3, 28, 66, 0.9)',
    borderColor: axisLineColor,
    textStyle: { color: '#fff' }
  },
  color: ["rgb(7, 111, 255)", "rgb(0, 254, 244)", "rgb(255, 216, 123)"],
  graphic: [
    {
      type: 'text', left: '27%', top: '45%',
      style: {
        text: largestPercentage.value + '%',
        align: 'center',
        fill: "#fff",
        fontSize: 22, fontWeight: 'bold',
      }
    },
    {
      type: 'text', left: '30%', top: '65%',
      style: {
        text: largestSkill.value.name,
        align: 'center',
        fill: "#fff", fontSize: 12,

      }
    }
  ],
  
  series: <PieSeriesOption[]>[{
    name: '学历构成', type: 'pie',
    radius: ['62%', '80%'],
    center: ['35%', '55%'],
    avoidLabelOverlap: false,
    label: { show: false },
    labelLine: { show: false },
    emphasis: {
      label: { show: false },
      scaleSize: 5
    },
    data: skillData.value,
    itemStyle: {
      borderWidth: 3,
      borderColor: panelBg
    },

  }]
}));

const resizeChart = () => myChart.value?.resize();

onMounted(() => {
  if (chartDom.value) {
    myChart.value = echarts.init(chartDom.value);
    myChart.value.setOption(option.value);
    window.addEventListener('resize', resizeChart);
  }
});

onUnmounted(() => {
  window.removeEventListener('resize', resizeChart);
  myChart.value?.dispose();
});

</script>

<style lang="less" scoped>
@import '../../variables.less';

.skill-chart-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
}

.chart-area {
  width: 100%;
  height: 230px;
  flex-shrink: 0;
  background: url("../../../../assets/pie_bg.webp") no-repeat;
  background-position: 39px 12px;
  background-size: 230px 230px;
}

.skill-details {
  display: flex;
  justify-content: space-around;
  flex-direction: column;
  gap: 15px;
  margin-top: 10px;
  flex-shrink: 0;
  padding: 0 5px;
  position: absolute;
  right: 10px;
  top: 30%;
}

.skill-detail {
  text-align: center;
  display: flex;
  align-items: center;
  font-size: 12px;
  gap: 5px; // Gap between elements
}

.color-indicator {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex-shrink: 0;
}

.skill-text {
  color: @text-color;
  white-space: nowrap;
}

.skill-value {
  font-weight: bold;
  color: @primary-color;
  white-space: nowrap;
}

.count {
  font-size: 10px;
  color: darken(@text-color, 15%);
  white-space: nowrap;
}
</style>